<template>
    <div class="down-height">
        <div class="top">
            <div class="title">时间访问量</div>
            <el-date-picker
                v-model="valueTime"
                type="daterange"
                value-format="yyyy-MM-dd"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                @change="changeDate">
            </el-date-picker>
        </div>
        <div class="box">
            <div class="watchChart" id="timeWatchChart"></div>
        </div>
    </div>
</template>
<script>
import { VisitsTime } from 'S/downloadNum';
import { resizeListener } from 'U/echartResize';
export default {
    name: 'timeWatchChart',
    data() {
        return {
            valueTime: '',
        };
    },
    mounted() {
        this.initData();
    },
    methods: {
        changeDate(val) {
            this.valueTime = val;
            this.initData();
        },
        async initData() {
            this.dataAxis = [];
            this.data = [];
            let params = {};
            if (this.valueTime) {
                params = {
                    endTime: this.valueTime[1],
                    startTime: this.valueTime[0]
                };
            }
            let res = await VisitsTime(params);
            if (res.status === 200) {
                res.data.forEach(element => {
                    this.dataAxis.push(element.to_char);
                    this.data.push(element.count);
                });
                this.echartInit();
            }
        },
        echartInit() {
            this.myChart = this.$echarts.init(document.getElementById('timeWatchChart'));
            this.myChart.setOption({
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    },
                    formatter: function (params) {
                        return '时间：' + params[0].name + '<br/>访问量：' + params[0].value;
                    }
                },
                xAxis: [
                    {
                        type: 'category',
                        axisLabel: { interval: 0 },
                        data: this.dataAxis
                    }
                ],
                yAxis: {
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        textStyle: {
                            color: '#030E39'
                        }
                    }
                },
                dataZoom: [
                    {
                        type: 'inside'
                    }
                ],
                series: [
                    {
                        type: 'bar',
                        barCategoryGap: '60%',
                        showBackground: true,
                        itemStyle: {
                            normal: {
                                color: '#FE8D1B',
                                label: {
                                    show: true, position: 'top'
                                }
                            }
                        },
                        data: this.data
                    }
                ]
            });
            resizeListener(this.myChart);
        }
    },
    beforeDestroy() {
        if (this.myChart) {
            this.myChart.dispose();
        }
    }
};
</script>